{extend name="public:base"}

{block name="content"}
{notempty name="domain"}
<div class="layui-row layui-col-space10">
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                <div style="display:flex;align-items: center;">
                    <div style="flex:1">近30天统计</div>
                    <div style="flex:1">
                        <form class="layui-form" action="">
                            <div class="layui-form-item layui-inline">
                                <div class="layui-input-inline">
                                    <select name="domain">
                                        <option value="">全部站点配置</option>
                                        {volist name="domain" id="vo"} 
                                        <option value="{$vo.id}">{$vo.host}站点</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
                                    <i class="layui-icon layui-icon-search"></i>
                                    查询
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <div id="echarts-records1" style="background-color:#ffffff;min-height:360px;padding: 10px"></div>
                </div>
            </div>
        </div>
    </div>
</div>	
<div class="layui-row layui-col-space10">
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                <div style="display:flex;align-items: center;">
                    <div style="flex:1">24小时统计</div>
                    <div style="flex:1">
                        
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <div id="echarts-records2" style="background-color:#ffffff;min-height:360px;padding: 10px"></div>
                </div>
            </div>
        </div>
    </div>
</div>	
{/notempty}
{/block}
{block name="script"} 
<script>
    layui.use(['table',  'jquery', 'common', 'form','echarts','laydate'], function () {
        let $ = layui.jquery;
        let common = layui.common;
        let count = layui.count;
        let echarts = layui.echarts;
        let laydate = layui.laydate;
        let form = layui.form;

        let table = layui.table;
        let cols = [
            [
            {
                title: '时间',
                field: 'time1',
                align: 'center',
            },
            {
                title: 'PV',
                field: 'pv1',
                align: 'center',
            },
            {
                title: 'UV',
                field: 'uv1',
                align: 'center',
            },
            {
                title: '时间',
                field: 'time2',
                align: 'center',
            },
            {
                title: 'PV',
                field: 'pv2',
                align: 'center',
            },
            {
                title: 'UV',
                field: 'uv2',
                align: 'center',
            }
            ]
        ]

        table.render({
            elem: '#table-list',
            url: '{:url("region")}',
            parseData: function(res){ 
            return {
            "code": res.code, //解析接口状态
            "msg": res.message, //解析提示文本
            "count": res.total, //解析数据长度
            "data": res.data //解析数据列表
            }},
            page: false,
            cols: cols,
            skin: 'line',
            toolbar: [],
            defaultToolbar: []
        });
        
        let xAxisData = {:json_encode($total['date'])};
        let data1 = {:json_encode($total['pv'])};
        let data2 = {:json_encode($total['uv'])};
        let data3 = {:json_encode($total['sum'])};

        let xAxisData1 = {:json_encode($today['date'])};
        let data4 = {:json_encode($today['pv'])};
        let data5 = {:json_encode($today['uv'])};
  
        let echartsRecords1 = echarts.init(document.getElementById('echarts-records1'), 'walden');
        let echartsRecords2 = echarts.init(document.getElementById('echarts-records2'), 'walden');
        let emphasisStyle = {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0,0,0,0.3)'
              }
        };
        let option = {
              legend: {
                data: ['PV', 'UV','重复数'],
                left: '10%'
              },
              brush: {toolbox: ['clear'],
                xAxisIndex: 0
              },
              toolbox: {
                feature: {
                  magicType: {
                    type: ['stack']
                  },
                  dataView: {}
                }
              },
              tooltip: {},
              xAxis: {
                data: xAxisData,
                name: '日期',
                axisLine: { onZero: true },
                splitLine: { show: false },
                splitArea: { show: false }
              },
              yAxis: {},
              grid: {
                bottom: 100
              },
              series: [
                {
                  name: 'PV',
                  type: 'line',
                  data: data1
                },
                {
                  name: 'UV',
                  type: 'line',
                  data: data2
                },
                {
                  name: '重复数',
                  type: 'line',
                  data: data3
                },
                
              ]
            };
        let option2 = {
              legend: {
                data: ['PV', 'UV'],
                left: '10%'
              },
              brush: {toolbox: ['clear'],
                xAxisIndex: 0
              },
              toolbox: {
                feature: {
                  magicType: {
                    type: ['stack']
                  },
                  dataView: {}
                }
              },
              tooltip: {},
              xAxis: {
                data: xAxisData1,
                name: '时间',
                axisLine: { onZero: true },
                splitLine: { show: false },
                splitArea: { show: false }
              },
              yAxis: {},
              grid: {
                bottom: 100
              },
              series: [
                {
                  name: 'PV',
                  type: 'line',
                  data: data4
                },
                {
                  name: 'UV',
                  type: 'line',
                  data: data5
                }
                
              ]
            };
		
            echartsRecords1.setOption(option);
            echartsRecords2.setOption(option2);
        form.on('submit(table-query)', function (data) {
            $.ajax({
                url: '{:url("dashed")}',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function(result) {
                    if (result.code == '1') {
                        option.xAxis.data = result.data.total.date;
                        option.series[0].data = result.data.total.pv;
                        option.series[1].data = result.data.total.uv;
                        option.series[2].data = result.data.total.sum;
                        echartsRecords1.setOption(option);
                        option2.xAxis.data = result.data.today.date;
                        option2.series[0].data = result.data.today.pv;
                        option2.series[1].data = result.data.today.uv;
                        option2.series[2].data = result.data.today.sum;
                        echartsRecords2.setOption(option2);
                    } 
                }
            })
            
            return false;
        });

        window.onresize = function() {
            echartsRecords1.resize();
        }
    })

</script>
</script>
{/block}
</html>
